<template>
  <div>
    <h1>【aty-mend-photo】 component demo</h1>
    <p>【aty-mend-photo】 </p>
    <aty-row class="fd-mend-photo">
      <aty-row>
        <aty-title :level="4">1.【aty-mend-photo】基础使用</aty-title>
        <aty-mend-photo
          imgSrc="/static/images/photo.png"
          @change="change"
          @confirm="confirm"
          @cancel="cancel" />
        <aty-title :level="5">截取图像结果展示</aty-title>
        <div id="jsTest">
          <img :src="resultImg" alt="resultImg" />
        </div>
      </aty-row>

    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      resultImg: ''
    }
  },
  methods: {
    change (data) {
      console.log('change')
      console.log(data)
    },
    confirm (data) {
      console.log('confirm')
      console.log(data)

      this.resultImg = data
    },
    cancel () {
      console.log('cancel')
    }
  },
  mounted () {

  }
}
</script>
<style   type="text/less"  lang="less">
    .fd-mend-photo {
        text-align: left;
        margin: 20px;
            >.aty-row {
                 margin-bottom: 20px;
             }
     }
    #jsTest {
        border: 1px solid #ddd;
        width:228px;
        height: 228px;
        text-align: center;
        img {
            display: block;
            width:100%;
            height:100%;
            border: none;
            line-height: 226px;
        }
    }
</style>
